<template>
  <Tel
    :attributes="attributes"
    :events="events"
  >
    <template #com>
      请选择地址：
      <AddrSelector v-model="val" @change="change"/>
      <p>{{val}}</p>
    </template>
    {{ code }}
  </Tel>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import AddrSelector from '@/components/AddrSelector/index.vue'
import Tel from './template/Tel.vue'
import { Attribute, Event } from './type'
export default defineComponent({
  name: 'ExampleAddrSelector',
  components: {
    AddrSelector,
    Tel
  },
  setup() {
    const val = reactive({
      provinceID: '',
      cityID: '',
      areaID: '',
      provinceName: '',
      cityName: '',
      areaName: ''
    })
    const attributes: Array<Attribute> = [
      {
        argu: 'v-model',
        instruction: '双向绑定',
        type: 'object',
        option: '-',
        default: '-'
      }
    ]
    const events: Array<Event> = [
      {
        name: 'change',
        instruction: '地址选择改变时触发',
        argu: '返回当前选择的地址object'
      }
    ]
    const code:string = '<AddrSelector v-model="val" @change="change"/>'
    return {
      val,
      attributes,
      events,
      code,
      change: function(data) {
        // eslint-disable-next-line no-console
        console.log('响应数据', data)
      }
    }
  }
})
</script>
